<template>
	<view class="content">


		<!-- 
		<u-navbar title-color="#000000" title-size='34' title="我的订单" :border-bottom="false" back-icon-color="#000000"
			:background="background">
			<view class="slot-wrap">

			</view>
		</u-navbar> -->

		<u-sticky>
			<view class="sticky">
				<u-tabs :is-scroll="false" bar-width="80" bar-height="5" font-size="" active-color="#000"
					inactive-color="#666" :list="tablist" bg-color="#CBECD5" :current="current"
					@change="change"></u-tabs>
			</view>
		</u-sticky>

		<view class="infoCont" v-if="list1.length">
			<view class="item" v-for="item in list1">
				<u-avatar mode="square" size="64"
					:src="item.goods_image"></u-avatar>
				<view class="constents">
					<view class="top">
						<view class="left">
							{{item.goods_name}}
							<text style="padding-left: 8rpx; font-size: 26rpx;">{{item.order_sn}}</text>
							
						</view>
						<view class="right">
							{{item.create_time}}
						</view>
					</view>
					<!-- -->
					<view class="bot" :class="[item.pay_status==1?'active':'']">
						<view class="right" style="color: #333;">
							- {{item.total_amount}}
						</view>
						<view class="text" v-if="item.pay_status==0" >
							未支付
						</view>
						<view class="text" v-else >
							已支付
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>
		
		<view  v-else class="infoCont" >
			<view v-if="!list1.length && senDate" class="empty" style="padding-top: 150px;">
				<view  class="emptyAddress-box">
					<u-empty src="https://zzdiy-prod.oss-cn-chengdu.aliyuncs.com/zzdiy_seller/empty.png" icon-size="300"
						text="暂无数据" mode="data"></u-empty>
				</view>
			</view>
		</view>
		

	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
					name: '全部'
				}, {
					name: '已支付'
				}, {
					name: '未支付'
				}],
				current: 0,
				background: {

					backgroundImage: 'linear-gradient( 180deg, #CBECD5 0%, #d8f0df 100%)'
				},

				total: null, //总共多少条数据
				list1: [],
				formData: {
					pageSize: 15, //每页10条数据
					page: 1, //第几页
				},
				status: "more",
				senDate: false,

			}
		},

		onReachBottom() {

			let allTotal = this.formData.pageSize;
			if (this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;

				this.getList();

			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},


		onLoad() {
			this.getList();
		},

		methods: {
			change(index) {
				this.senDate = false;
				this.current = index;
				this.formData.page=1;
				this.list1=[]
				this.getList()
			},

			getList() {
				let query = {

					type: this.current,
					page: this.formData.page,
					limit: this.formData.pageSize,
				}

				this.$u.api
					.orderList(query)
					.then((res) => {
						console.log(res, 888)

						this.senDate = true;
						if (res.code == 1) {
							this.total = res?.data?.count;
							const newlist = res?.data?.list;
							this.list1.push(...newlist);
							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
						} else {
							this.status = "noMore"; //加载完状态
							console.log("请求数据失败");
						}
					});





			},



		}


	}
</script>
<style>
	page{
		background: #CBECD5;
	}
</style>
<style scoped lang="scss">
	/deep/ .u-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 34rpx;
	}

	.slot-wrap {
		width: 100%;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 40rpx;
		margin-left: -20px;
	}

	/deep/ .u-tab-item {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
	}

	.infoCont {
		padding: 8rpx 40rpx 40rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(220, 175, 84, 0.3);
		min-height: 93vh;
	}




	.item {
		border-bottom: 1rpx solid #E0E0E0;
		padding: 32rpx 0 32rpx 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 13px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #ED2933;
	
		.constents {
			flex: 1;
			margin: 0 0 0 19rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			.top {
				margin-bottom: 4rpx;
	
	
				.left {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					// line-height: 33rpx;
					margin-bottom: 4rpx;
	
					.tag {
						display: inline-flex;
						margin-left: 13rpx;
						padding: 2rpx 26rpx;
						background: #FFF5DF;
						border-radius: 7rpx 7rpx 7rpx 7rpx;
						border: 1rpx solid #FFAA3C;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #FF9D00;
	
						&.fail {
							background: #ECECEC;
							border: 1rpx solid #AEAEAE;
							color: #737373;
						}
	
						&.suc {
							background: #FFE7F0;
							border: 1rpx solid #FFB5D2;
							color: #FF3957;
						}
					}
				}
	
				.right {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					// line-height: 28rpx;
				}
			}
	
			.bot {
				display: flex;
				align-items: flex-end;
				justify-content: flex-start;
				flex-direction: column;
				&.active{
					color:  #35AC6C;
				}
				.text{
					font-size: 24rpx;
				}
	
				.left {
					font-family: PingFang SC, PingFang SC;
					font-weight: 300;
					font-size: 24rpx;
					color: #666666;
					line-height: 28rpx;
				}
	
				.right {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 34rpx;
					color: #FF3957;
					line-height: 40rpx;
				}
			}
		}
	
	
	
	}
</style>